<template>
	<view class="temp">
		<view class="content">
			<view class="bg_video">
				<video class="vdo" :autoplay="true" :show-center-play-btn="false" :src="dowUrl" :loop="true"
					:controls="false"></video>
			</view>
			<view class="btnBox">
				<view class="btnContent">
					<view class="shareBtn">
						<button class="btn" open-type="share">
							<image class="img" src="https://tb.wuyouzhuan888.com/applet-icon/videoShare.png" style="width: 40rpx; height: 40rpx;">
							</image>
						</button>
						<view class="text" style="font-size: 26rpx;">
							分享
						</view>
					</view>
					<view class="dowBtn" @click.stop="clickDownload">
						<view class="dowBtnImg">
							<image style="width: 40rpx; height: 40rpx;" src="https://tb.wuyouzhuan888.com/applet-icon/video_download.png"></image>
						</view>
						<view class="text" style="font-size: 26rpx;">下载</view>
					</view>
					<view class="" style="width: 50%;">
						<button class="fdy" open-type="uploadDouyinVideo">
							<image class="" src="https://tb.wuyouzhuan888.com/applet-icon/dy.png" style="width: 61rpx;height: 61rpx;">
							</image>
							<view class="text">
								一键发抖音
							</view>
						</button>
					</view>
				</view>
			</view>
			<view class="moreRecommend">
				<view class="imgsBox">
					<img src="https://tb.wuyouzhuan888.com/applet-icon/gd.png" style="width: 100%;height: 100%;" alt="">
				</view>
				<scroll-view scroll-x="true" class="data-list" @scrolltolower="onReachBottom"
					style="margin-top: 40rpx ;">
					<view style="background-color: #000000;">
						<cate :list="videoList" />
						<view v-if="isEmpty" class="empty">
							<u-empty color="#A897D9" text="暂无数据"
								src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png"></u-empty>

						</view>
					</view>
					<view @click="toTop" v-if="scrollTop>60">
						<xuanfu></xuanfu>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup border-radius="20" v-model="saveMask" mode="center">
			<view class="qq">
				<saveMask @closeDk="closeDk1" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import saveMask from './save.vue'
	import cate from './video'
	export default {
		components: {
			saveMask,
			cate
		},
		async onUploadDouyinVideo(uploadOptions) {
			uni.showLoading({
				title: '内容生成中...'
			})
			const videoPath = await this.uploadDyDownloadFile();

			uni.hideLoading();

			return {
				videoPath: videoPath,
				titleConfig: {
					title: "",
					hashtagMarkers: [{
							start: 0,
							hashtag: "一键视频定制",
						},

						{
							start: 0,
							hashtag: this.videoName,
						},
					],
				},
				extra: {
					anchor: {
						anchorType: "app",
						title: "一键制作视频同款",
						path: "/subpackFind/videoProduction?videoId=" + this.videoId
					}
				},
				success: function(callback) {},
				fail: function(callback) {},
				complete: function(callback) {},
			};

		},
		chooseVideo() {
			return new Promise((resolve) => {
				tt.chooseVideo({
					sourceType: ["album", "camera"],
					compressed: true,
					success: (res) => {
						resolve(res.tempFilePath);
					},
					fail: (err) => {
						let errType = err.errMsg.includes("chooseVideo:fail cancel") ?
							"取消选择" :
							"选择失败";
						tt.showModal({
							title: errType,
							content: err.errMsg,
							showCancel: false,
						});
						resolve("");
					},
				});
			});
		},
		data() {
			return {
				url: '',
				dowUrl: '',
				task: null,
				pageVisible: false,
				saveMask: false,
				shareTitle: '',
				shareId: '',
				share: 0,
				videoId: 0,
				videoName: '',
				// 图集列表
				videoList: [],
				// 视频总数
				videoTotal: 0,
				// 页数
				videoPage: 1,
				// 每页条数
				videoSize: 10,
				// 加载状态
				status: 'loadmore',
				// 数据为空
				isEmpty: false,
			}
		},
		onLoad(options) {
			this.makeInfo(options.id)
			this.getVideoList()
		},
		onBackPress(e) {
			uni.redirectTo({
				url: "/subpackFind/videoProduction?videoId=" + this.videoId
			})

			return false;
		},
		async onShareAppMessage() {
			if (this.shareTitle == '') {
				// #ifdef MP-TOUTIAO
				// 获取分享信息
				await this.getDyShareInfo();
				// #endif
				return {
					// 标题
					title: this.shareTitle,
					// url
					path: "/subpackFind/videoProduction?videoId=" + this.videoId,
					templateId: this.shareId,
				};
			}
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.videoPage * this.videoSize;

			if (allTotal < this.videoTotal) {
				//当前条数小于总条数 则增加请求页数
				this.videoPage++;
				this.getVideoList(this.sortId);
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		methods: {
			closeDk1() {
				this.saveMask = false
			},
			makeInfo(id) {
				this.$u.api.video.makeInfo({
					makeId: id,
					page: 1,
					size: 10
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.dowUrl = res.data.record.download_url
					this.videoId = res.data.record.pro_id
					this.videoName = res.data.record.pro_name
					this.videoTotal = res.data.total;
					this.videoList = res.data.list
				})
			},
			uploadDyDownloadFile() {
				let url = this.dowUrl
				return new Promise((resolve) => {
					uni.downloadFile({
						url: url,
						success: (res) => {
							resolve(res.tempFilePath);
						},
						fail: (err) => {
							resolve(err);
						},
					});
				})
			},
			// 获取图集列表
			getVideoList(sortId) {
				this.$u.api.video.getVideoList({
					sortId: 1,
					page: this.videoPage,
					size: this.videoSize,
					types: 'recommend'
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}

					this.videoTotal = res.data.total;

					if (this.videoPage > 1) {
						this.videoList.push(...res.data.list);
					} else {
						this.videoList = res.data.list
					}
					// 数据为空
					if (this.videoList.length == 0) {
						this.isEmpty = true
					}

					if (this.videoSize > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}
				})
			},
			clickDownload() {
				const that = this;
				uni.showLoading({
					title: '下载中...'
				});
				that.task = uni.downloadFile({
					url: that.dowUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading();
									that.saveMask = true
								},
								fail: function() {
									uni.getSetting({
										success: (result) => {
											if (!result.authSetting[
													'scope.album']) {
												that.isAuth()
											}
										}
									});
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
						uni.hideLoading();
					}
				})
			},
			// 引导用户开启权限
			isAuth() {
				uni.showModal({
					title: "温馨提示",
					content: '保存视频需要相关权限，请授权相册权限',
					confirmText: '前往授权',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									if (result.authSetting[
											'scope.album']) {
										this.downLoadImg()
									} else {
										this.$u.toast('授权失败')
									}
								},
							});
						}
					}
				});
			},
			// 获取抖音分享信息
			getDyShareInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getShareInfo().then(res => {
						this.shareId = res.data.shareId;
						this.shareTitle = res.data.shareTitle;
						resolve();
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.temp {
		width: 100%;
		height: 100%;
	}

	.content {
		background-color: #000000;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
	}

	.bg_video {
		width: 100%;
		height: 75vh;
		z-index: 9;

		.vdo {
			width: 100%;
			height: 100%;
		}
	}

	.btnBox {
		height: 15vh;
		width: 100%;
		background: #000000;
		position: relative;
	}

	.btnContent {
		display: flex;
		width: 100%;
		padding: 50rpx 0;
		background-color: #1b1b1d;

		.btn {
			position: relative;
		}

		.dowBtn {
			position: relative;
			margin: 0 70rpx 0 20rpx;

			.dowBtnImg {
				position: relative;
				background: none;
				height: 40rpx;
				width: 40rpx;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				padding: 0;
				margin: 0;
			}

			.text {
				width: 100%;
				position: relative;
				text-align: center;
				color: #FFFFFF;
				bottom: -10rpx;
				left: -10rpx;
			}
		}

	}

	.shareBtn {
		margin: 0 50rpx;

		button {
			position: relative;
			background: none;
			height: 40rpx;
			width: 40rpx;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			padding: 0;
			margin: 0;
			line-height: 0;

			&::after {
				border: none !important;
			}
		}

		.text {
			width: 100%;
			position: relative;
			color: #FFFFFF;
			bottom: -10rpx;
			left: -10rpx;
		}
	}

	.fdy {
		width: 100%;
		height: 96rpx;

		color: #FFFFFF;
		background-color: #37a6eb;
		display: flex;
		justify-content: center;
		align-items: center;
		background-repeat: no-repeat;
		.text {
			line-height: 120rpx;
		}
	}

	.moreRecommend {
		height: 10vh;
		width: 100%;
		background-color: #000000;
		.imgsBox {
			width: 50%;
			height: 64rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}
	}

	.modelMore {
		position: fixed;
		width: 100%;
		height: 90vh;
		background-image: url(https://tb.wuyouzhuan888.com/applet-icon/bgC.png);
		top: 0;
		left: 0;
		background-size: 100% 100%;
		z-index: 300;
	}

	.contentBox {
		flex-direction: column;
		align-items: center;
		display: flex;
		position: fixed;
		top: 20%;
		width: 100%;
		z-index: 500;

		.text {
			color: #FFFFFF;
			margin-top: 20rpx;
			font-size: 30rpx;
		}

		.btnBox {
			margin-top: 56rpx;
			flex-direction: column;
			align-items: center;
			display: flex;

			.text {
				color: #FFFFF;
				font-size: 20rpx;
			}

			.text1 {
				margin-top: 10rpx;
				background-image: url('https://tb.wuyouzhuan888.com/applet-icon/jx.png');
				background-size: 100% 100%;
				width: 474rpx;
				height: 96rpx;
				color: #FFFFFF;
				text-align: center;
				font-size: 40rpx;
				line-height: 96rpx;
			}
		}
	}

	.loadingBox {

		margin-bottom: 40rpx;
	}
</style>